<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    login-form {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    login-form h2 {
        margin-bottom: 20px;
    }

    input-field {
        width: 100%;
        height: 100px;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    login-button {
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin: 10px;
    }

    login-button:hover {
        background-color: #45a049;
    }
</style>
<body>
<form class="login-form"  id="login-from" >
    <h2>用户登录</h2>
    <input type="text" name="username" id="username" placeholder="用户名" >
    <div style="height: 20px" ></div>
    <input type="password"  name="password" placeholder="密码" >
    <div style="height: 20px" ></div>
    <button type="button" class="login-button" id="login-submit">登录</button>
    <button type="button" class="login-button" id="register-button" onclick=" jump()">注册</button>
</form>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("#login-submit").click(function (){
    var data=$("#login-from").serialize();
    $.ajax({
        url:"/login",
        type:"post",
        data:data,
        success:function (data){
            if (data=="success"){
                alert("登录成功");
                window.location.href="/index"
            }else if(data) {
alert("登录失败,请检查用户名或密码是否正确");
            }
        },
        error:function(date){
            alert("网络不佳")
        }
    });
});
});
function  jump(){
    window.location.href="/register.html"
}

</script>
</html>